<template>
	<view class="echart">
		<div ref="pie"></div>
	</view>
</template>

<script>
export default {
  props:['chartData'],
  data() {
    return {}
  },
  mounted() {
    this.getChartData();
  },
  methods: {
    getChartData() {
      let option = {
        series: [
          // 仪表盘：最里层刻度
          {
            type: "gauge",
            center: ['50%', '60%'],
            radius: '110%',
            startAngle: 220,
            endAngle: -40,
            splitNumber: 5,
            pointer: {show: false,},
            title: {show: false,},
            detail: {show: false,},
            splitLine: { show: false, },
            axisLabel: { show: false, },
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0, "#D6E8FD"],
                  [1, "#D6E8FD"],
                ],
                opacity: 0,
              },
            },
            axisTick: {
              length: 10,
              lineStyle: {
                color: "auto",
              },
            },
          },
          // 仪表盘：中间层刻度
          {
            type: "gauge",
            center: ['50%', '60%'],
            radius: '125%',
            startAngle: 220,
            endAngle: -40,
            pointer: { show: false, },//仪表盘指针
            progress: { show: false,},//仪表盘进度
            title: {show: false,},
            detail: {show: false,},
            splitLine: { show: false, },
            axisLabel: { show: false, },//仪表盘轴线
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0, "#BEDBFC"],
                  [1, "#BEDBFC"],
                ],
                opacity: 0,
              },
            },
            axisTick: {
              show: true,
              splitNumber: 10,
              length: 2,
              lineStyle: {
                color: "auto",
                width: 1,
              },
            },
          },
          // 仪表盘：最外层刻度-间隔条形
          {
            type: 'gauge',
            center: ['50%', '60%'],
            radius: '110%',
            min: 0,
            max: 100,
            z: 4,
            //刻度数量
            splitNumber: 14,
            startAngle: 220,
            endAngle: -40,
            // 仪表盘轴线
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            // 刻度样式
            axisTick: {
              show: true,
              length: 15,
              splitNumber: 3,
              distance: -12,
              lineStyle: {
                color: '#ffffff',
                width: 3,
              },
            },
            // 刻度标签
            axisLabel: { show: false, },
            // 分隔线样式
            splitLine: { show: false, },
            detail: { show: false, },
            title: { show: false, },
          },
          // 仪表盘：最外层刻度-数据
          {
            name: '内层数据刻度',
            type: 'gauge',
            center: ['50%', '60%'],
            radius: '111%',
            z: 3,
            min: 0,
            max: 100,
            startAngle: 220,
            endAngle: -40,
            // 仪表盘轴线
            axisLine: {
              roundCap: false,
              lineStyle: {
                width: 15,
                color: [
                  [1, '#BEDBFC'],
                ],
              },
            },
            // 进度值
            progress: {
              show: true,
              roundCap: false,
              width: 15,
              itemStyle: {
                color: '#3674F6',
              },
            },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            // 仪表盘指针
            pointer: {
              show: true,
              length: "16%",
              width: 4,
              icon: "rect",
              offsetCenter: ['5%', '-84%'],
              itemStyle: {
                color: 'red',
              },
            },
            title: {
              show: true,
              offsetCenter: [0, '55%'],
              textStyle: {
                color: '#333333',
                fontSize: 14,
                fontFamily:'Source Han Sans CN',
              },
            },
            detail: {
              formatter: function (value) {
                return value + "%"
              },
              offsetCenter: ['0', '2%'],
              textStyle: {
                fontSize: 20,
                color: '#448EEF',
              },
            },
            data: [
              {
                name:'申报项目趋势',
                value: this.chartData
              },
            ],
          },
        ]
      }
      this.$refs.pie.init(this.$echarts, chart => {
        chart.setOption(option);
      });
    }
  }
}
</script>

<style scoped>
.echart{
  width: 100%;
  height: 100%;
}
</style>
